<template>
  <div class="page-container">
    <!-- 左侧动画区域 -->
    <div class="left-section">
      <lottie-player
        animation-path="/animations/Animation - 1748337401381.json"
        height="100%"
      />
    </div>

    <!-- 右侧聊天区域 -->
    <div class="right-section">
      <div class="chat-container">
        <div class="chat-box">
          <div class="messages" ref="messagesContainer">
            <div v-for="(message, index) in messages"
                 :key="index"
                 :class="['message', message.type]">
              <el-avatar :size="40" v-if="message.type === 'user'">{{ userInitial }}</el-avatar>
              <div class="message-content">
                {{ message.content }}
              </div>
              <el-avatar :size="40" v-if="message.type === 'ai'">AI</el-avatar>
            </div>
          </div>
          <div class="input-area">
            <el-input
              v-model="inputMessage"
              type="textarea"
              :rows="3"
              placeholder="请输入消息..."
              @keyup.enter.prevent="sendMessage"
            />
            <el-button type="primary" @click="sendMessage" :loading="loading">
              发送
            </el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, computed } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import LottiePlayer from '/src/components/lottie.vue'

export default {
  name: 'ChatView',
  components: {
    LottiePlayer
  },
  setup() {
    // 保持原有的 setup 逻辑不变
    const messages = ref([])
    const inputMessage = ref('')
    const loading = ref(false)
    const messagesContainer = ref(null)

    const userInitial = computed(() => {
      return 'S' // shiqi10001 的首字母
    })

    // 原有的方法保持不变
    const sendMessage = async (e) => {
      if (e?.type === 'keyup' && e.shiftKey) return

      if (!inputMessage.value.trim()) {
        return
      }

      const messageText = inputMessage.value.trim()

      messages.value.push({
        content: messageText,
        type: 'user'
      })

      inputMessage.value = ''
      loading.value = true

      try {
        const response = await axios.get('/hig', {
          params: {
            message: messageText,
            memoryId: '123'
          },
          timeout: 120000,
          headers: {
            'Content-Type': 'application/json'
          }
        })

        if (response.data) {
          messages.value.push({
            content: response.data,
            type: 'ai'
          })
        }
      } catch (error) {
        console.error('Error:', error)
        if (error.code === 'ECONNABORTED' && error.message.includes('timeout')) {
          ElMessage.error('请求超时，请重试')
        } else {
          ElMessage.error(error.response?.data?.message || '请求失败，请稍后重试')
        }
      } finally {
        loading.value = false
        scrollToBottom()
      }
    }

    const scrollToBottom = () => {
      if (messagesContainer.value) {
        setTimeout(() => {
          messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
        }, 100)
      }
    }

    onMounted(() => {
      scrollToBottom()
    })

    return {
      messages,
      inputMessage,
      loading,
      sendMessage,
      messagesContainer,
      userInitial
    }
  }
}
</script>

<style scoped>
.page-container {
  display: flex;
  height: 100vh;
  background-color: #f0f2f5;
}

.left-section {
  width: 400px;
  padding: 20px;
  background-color: #ffffff;
  border-right: 1px solid #dcdfe6;
}

.right-section {
  flex: 1;
  padding: 20px;
}

.chat-container {
  height: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.chat-box {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}

.messages {
  flex-grow: 1;
  overflow-y: auto;
  padding: 20px;
  scrollbar-width: thin;
  scrollbar-color: #909399 #f4f4f5;
}

.message {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
  gap: 10px;
}

.message.user {
  flex-direction: row;
}

.message.ai {
  flex-direction: row-reverse;
}

.message-content {
  padding: 10px 15px;
  border-radius: 4px;
  max-width: 70%;
  word-wrap: break-word;
  line-height: 1.5;
}

.user .message-content {
  background-color: #ecf5ff;
  color: #409eff;
}

.ai .message-content {
  background-color: #f4f4f5;
  color: #303133;
}

.input-area {
  padding: 20px;
  border-top: 1px solid #dcdfe6;
  display: flex;
  gap: 10px;
  background-color: #f8f9fa;
}

.input-area .el-textarea {
  flex-grow: 1;
}

.el-button {
  align-self: flex-end;
}
</style>
